<template>
    <div class="content">
        <div class="journalism_details_breadcrumb">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>您的位置</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/projectCase' }">产品与服务</el-breadcrumb-item>
                    <el-breadcrumb-item>项目案例</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        <h3>{{ data.title }}</h3>
        <div class="detail">
            <div v-if="data.severName"><span>服务名称：</span>{{ data.severName }}</div>
            <div v-if="data.serverTime"><span>辅导时间：</span>{{ data.serverTime }}</div>
            <div v-if="data.serverType"><span>辅导方式：</span>{{ data.serverType }}</div>
            <div v-if="data.serverUseing"><span>适合企业：</span>{{ data.serverUseing }}</div>
            <div>
                <span>服务重点：</span>{{ data.serverPoint }}
            </div>
            <template v-if="data.serverist">
                <div v-for="(item, index) in data.serverist" :key="index">
                    <span>{{ item.title }}</span>
                    <div v-for="(el, dex) in item.list" :key="dex">
                        <span style="font-size: 18px;margin-top: 10px ;display: block;">{{ el.title }}</span>
                        <div>{{ el.detail }}</div>
                    </div>
                </div>
            </template>
            <template v-if="data.relatedServices">
                <div v-for="(item, index) in data.relatedServices" :key="index">
                    <span>{{ item.title }}</span>
                    <div v-for="(el, dex) in item.list" :key="dex">
                        <span style="font-size: 18px;margin-top: 10px ;display: block;">{{ el.title }}</span>
                        <div>{{ el.detail }}</div>
                    </div>
                </div>
            </template>
            <template v-if="data.planServices">
                <div v-for="(item, index) in data.planServices" :key="index">
                    <span>{{ item.title }}</span>
                    <div v-for="(el, dex) in item.list" :key="dex">
                        <span style="font-size: 18px;margin-top: 10px ;display: block;">{{ el.title }}</span>
                        <div>{{ el.detail }}</div>
                    </div>
                </div>
            </template>
            <img src="../assets/image/cooperation1.jpg" alt="" style="width: 100%;height:400px;">
        </div>

    </div>
</template>

<script>
import { List } from './projectCase'
export default {
    created() {
        JSON.parse(JSON.stringify(List)).forEach(el => {
            if (this.$route.query.key == el.key) {
                this.data = el
            }
        })
    },
    data() {
        return {
            data: null
        };
    },
    components: {},
    watch: {},
    methods: {},
    computed: {},
}
</script>

<style scoped>
.content {
    min-height: calc(100vh - 260px);
}
.journalism_details_breadcrumb {
    width: 70%;
    margin: auto;
    padding-top: 3% ;
    box-sizing: border-box;
    /* position: absolute;
    top: 0;
    left: 10%; */
    z-index: 999;
}

.journalism_details_breadcrumb>>>.el-breadcrumb__inner {
    font-size: 14px;
    font-weight: normal;
    color: #04113B;
}
h3 {
    font-weight: bold;
    font-size: 32px;
    margin: 20px 0 50px 0;
    text-align: center;
}

.detail {
    padding: 10px 15%;
    box-sizing: border-box;
}

.detail>div {
    margin-bottom: 10px;
}

span {
    font-size: 20px;
    color: rgb(54, 85, 165);
    margin-bottom: 10px;
    font-weight: 500;
}
</style>